<template>
	<view class="TUI-ImageMessage" :class="[message.flow === 'out'?'outr':'']" @tap="previewImage">
		<view class="imageView" :style="{minHeight: renderDom[0].rpxHeigth+ 'rpx'}">
			<image @load="loadOk" :style="{display: showImg?'inline-block':'none',width:'210rpx',height: renderDom[0].rpxHeigth+ 'rpx'}"  :class="'image-message ' + (isMine ? 'my-image' : '')"  :src="renderDom[0].src">
			</image>
		</view>
	</view>
</template>

<script>
	import {
		parseImage
	} from '@/utils/message-facade';

	export default {
		data() {
			return {
				renderDom: [],
				percent: 0,
				showImg: false
			};
		},

		components: {},
		props: {
			message: {
				type: Object,
				default: ''
			},
			isMine: {
				type: Boolean,
				default: true
			}
		},

		watch: {
			message: {
				handler: function(newVal) {
					let arr = parseImage(newVal);
					let curPxWdith = 210 * this.$store.state.rpxSize;
					let scale = curPxWdith / arr[0].width;
					arr[0].rpxHeigth = (arr[0].height * scale) / this.$store.state.rpxSize;
					this.renderDom = arr;
					this.percent = newVal.percent;
				},
				immediate: true,
				deep: true
			},

			// renderDom: {
			// 	handler: function(newVal) {
			// 		console.log("图片信息", newVal);
			// 	},
			// 	immediate: true,
			// 	deep: true
			// },
		},
		methods: {
			loadOk(){
				this.showImg = true;
			},
			previewImage() {
				uni.previewImage({
					current: this.renderDom[0].src,
					// 当前显示图片的http链接
					urls: [this.renderDom[0].src]
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.outr {
		border-top-left-radius: 20rpx !important;
		border-top-right-radius: 0 !important;
		background-color: #f1f4f7 !important;
	}

	.TUI-ImageMessage {
		width: 250rpx;
		padding: 20rpx;
		background-color: #f1f4f7;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;

	}
	.imageView {
		position: relative;
	}
	.image-message {
		
		// position: absolute;
		// left: 0;
		// top: 0;
		// width: 100%;
		// height: 100%;
	}
</style>